<template>
  <div class="center">
    <text class="main_title">{{ globalConfig.MAIN_TITLE }}产品</text>
    <text class="main_sub_title"
      >{{ globalConfig.MAIN_TITLE }}产品体系支撑您的各类上云业务场景</text
    >

    <el-input
      placeholder="搜索产品名称"
      :prefix-icon="Search"
      borderless
      class="main_input"
    />

    <div class="hot">
      <text>热门搜索:</text>
      <text>弹性云主机</text>
      <text>CDN加速</text>
      <text>{{ globalConfig.MAIN_TITLE }}电脑</text>
    </div>
  </div>
</template>
<script setup lang="ts">
import { globalConfig } from '@/util/globalConfig';
import { Search } from '@element-plus/icons-vue';
</script>

<style scoped lang="scss">
.center {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 25px;

  min-width: 1280px;
  width: 100vw;
  height: 320px;
  background: url('../assets/bk_banner.png');
  background-size: 100% 100%;
}

.main_title {
  font-size: 48px;
  font-weight: bold;
}

.main_sub_title {
  font-size: 18px;
  font-weight: normal;
  color: #4e4e4e;
}

.main_input {
  width: 60vw;
  height: 50px;
  max-width: 600px;

  :deep(.el-input__wrapper) {
    border-radius: 10px;
    box-shadow: none;
  }
}

.hot {
  display: flex;
  gap: 20px;
  font-size: 15px;
  color: #4e4e4e;
}
</style>
